<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>

<c:url value="/recordsTraining.html" var="recordsUrlTraining"/>
<c:url value="/createTraining.html" var="addUrlTraining"/>
<c:url value="/updateTraining.html" var="editUrlTraining"/>
<c:url value="/deleteTraining.html" var="deleteUrlTraining"/>

<html>
<head>
	<link rel="stylesheet" href="css/stylekram.css" type="text/css" />
	<link rel="stylesheet" href="css/customkram.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.6.js"></script>
	<script type="text/javascript" src="js/newTraining.js"></script>
	

	<title>Training</title>
	
	<script type='text/javascript'>
	$(function() {
		// init
		urlHolderTraining.records = '${recordsUrlTraining}';
		urlHolderTraining.add = '${addUrlTraining}';
		urlHolderTraining.edit = '${editUrlTraining}';
		urlHolderTraining.del = '${deleteUrlTraining}';
		loadTableTraining();
		
		$('#newBtnTraining').click(function() { 
			toggleFormsTraining('new');
			toggleCrudButtonsTraining('hide');
		});
		
		$('#editBtnTraining').click(function() { 
			if (hasSelectedTraining()) {
				toggleFormsTraining('edit');
				toggleCrudButtonsTraining('hide');
				fillEditFormTraining();
			}
		});
		
		$('#reloadBtnTraining').click(function() { 
			loadTableTraining();
		});

		$('#deleteBtnTraining').click(function() {
			if (hasSelectedTraining()) { 
				submitDeleteRecordTraining();
			}
		});
		
		$('#newFormTraining').submit(function() {
			event.preventDefault();
			if(newformValidatorT()){
			submitNewRecordTraining();
			}
		});
		
		$('#editFormTraining').submit(function() {
			event.preventDefault();
			if(editformValidatorT()){
			submitUpdateRecordTraining();
			}
		});

		$('#closeNewFormTraining').click(function() { 
			toggleFormsTraining('hide'); 
			toggleCrudButtonsTraining('show');
		});
		
		$('#closeEditFormTraining').click(function() { 
			toggleFormsTraining('hide'); 
			toggleCrudButtonsTraining('show');
		});
	});
	</script>
</head>

<body>
	
	<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
		<a class="ui-jqgrid-titlebar-close HeaderButton" href="javascript:void(0)" role="link" style="right: 0px;">
		<span class="ui-icon ui-icon-circle-triangle-n"></span>
		</a>
	<span class="ui-jqgrid-title">Employee System</span>
</div>
	
	
	<table id='tableTraining'>
		<caption></caption>
		<thead>
			<tr>
				<th></th>
				<th>Training ID</th>
				<th>Training Name</th>
				<th>Description</th>
			</tr>
		</thead>
	</table>
	
	<div id='controlBarTraining'>
		<input type='button' value='New' id='newBtnTraining' />
		<input type='button' value='Delete' id='deleteBtnTraining' />
		<input type='button' value='Edit' id='editBtnTraining' />
		<input type='button' value='Reload' id='reloadBtnTraining' />
	</div>
	
	<div id='newFormTraining'>
		<form action="" name="newform" id="newform">
  			<fieldset>
				<legend>Add Employee</legend>
				<label for='newTrainingId'>Training Id</label><input type='text' id='newTrainingId'/><br/>
				<label for='newTrainingName'>Training Name</label><input type='text' id='newTrainingName'/><br/>
				<label for='newDescription'>Description</label><input type='text' id='newDescription'/><br/>
  			</fieldset>
			<input type='button' value='Close' id='closeNewFormTraining' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
	<div id='editFormTraining'>
		<form action="" name="editform" id="editform">
  			<fieldset>
				<legend>Edit</legend>
				<input type='hidden' id='editTrainingId'/>
				<label for='editTrainingName'>Training Name</label><input type='text' id='editTrainingName'/><br/>
				<label for='editDescription'>Description</label><input type='text' id='editDescription'/><br/>
			</fieldset>
			<input type='button' value='Close' id='closeEditFormTraining' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
</body>
</html>